<template>
    <div class="module-card">
        <div class="module-header">
            <h2 class="module-title">团队成员</h2>
            <button class="text-primary text-sm hover:underline" @click="viewTeamMembers">查看全部</button>
        </div>
        <div class="p-4">
            <div class="grid grid-cols-2 sm:grid-cols-3 gap-3">
                <div class="flex items-center p-2 hover:bg-gray-50 rounded-lg transition-colors"
                    v-for="(member, index) in teamMembers" :key="index">
                    <img :src="member.avatar" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
                    <div>
                        <div class="text-sm font-medium">{{ member.name }}</div>
                        <div class="flex items-center text-xs">
                            <span class="w-2 h-2 rounded-full" :class="member.statusClass + ' mr-1'"></span>
                            <span class="text-gray-500">{{ member.statusText }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'TeamMembers',
    props: {
        teamMembers: {
            type: Array,
            default: () => [
                {
                    name: '张明',
                    avatar: 'https://picsum.photos/id/1/200',
                    statusClass: 'bg-success',
                    statusText: '在线'
                },
                {
                    name: '李华',
                    avatar: 'https://picsum.photos/id/2/200',
                    statusClass: 'bg-warning',
                    statusText: '离开'
                },
                {
                    name: '王芳',
                    avatar: 'https://picsum.photos/id/3/200',
                    statusClass: 'bg-gray-300',
                    statusText: '离线'
                },
                {
                    name: '赵伟',
                    avatar: 'https://picsum.photos/id/4/200',
                    statusClass: 'bg-success',
                    statusText: '在线'
                },
                {
                    name: '陈静',
                    avatar: 'https://picsum.photos/id/5/200',
                    statusClass: 'bg-primary',
                    statusText: '忙碌'
                },
                {
                    name: '刘强',
                    avatar: 'https://picsum.photos/id/6/200',
                    statusClass: 'bg-success',
                    statusText: '在线'
                }
            ]
        }
    },
    methods: {
        viewTeamMembers() {
            // 查看所有团队成员逻辑
            this.$emit('view-all-members');
        }
    }
}
</script>